<template>
  <div>
    <div class="mapfont" style="width: 100%">
      <el-row class="mb20">
        <el-col :lg="23" :xl="23" :md="23" :sm="23" :xs="23" class="tips">
          温馨提示：腾讯地图查询不到输入的位置时，请输入城市及完整的地域名！！！
        </el-col>
      </el-row>
      <el-input
        v-model="addressKeyword"
        placeholder="请输入地址来直接查找相关位置"
        clearable
        class="mb20"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getAddressKeyword"
        />
      </el-input>
      <div id="container" style="width: 100%; height: 700px" />
      <!-- <div class="ybut">
        <el-button @click="nobut"> 取消 </el-button
        ><el-button type="primary" @click="mapbut"> 提交 </el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import maps from 'qqmap'
import $ from 'jquery'
export default {
  data() {
    return {
      // 腾讯地图
      map: null,
      getAddress: null,
      getAddCode: null,
      addressKeyword: '',

      longitude: 0, // 经度
      latitude: 0, // 纬度
      Latitudeandlongitude: '', // 经纬度
      address: '', // 地址
    }
  },
  mounted() {
    this.inits()
  },
  methods: {
    // 地图
    mapoff() {},
    nobut() {
      this.address = ''
    },
    mapbut() {
      if (this.address == '') {
        this.$message({
          message: '您还没有选择位置，请选择位置！！！',
          type: 'warning',
        })
      } else {
        var i = '经度：' + this.longitude + ',纬度：' + this.latitude
        // alert(i + '地址:' + this.address)
      }
    },

    // 初始化地图
    inits() {
      var that = this
      // 使用自己的腾讯地图key
      maps.init('W3YBZ-NW734-APUUL-XQTC4-76L2T-XXXX', () => {
        var myLatlng = new qq.maps.LatLng(30.45569387962833, 114.42734017968178)
        var myOptions = {
          zoom: 15,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP,
        }
        that.map = new qq.maps.Map(
          document.getElementById('container'),
          myOptions
        )
        // 获取点击后的地址
        qq.maps.event.addListener(that.map, 'click', function (event) {
          var marker = new qq.maps.Marker({
            position: event.latLng,
            map: that.map,
          })
          // 获取点击后的地图坐标
          that.longitude = event.latLng.lng // 经度
          that.latitude = event.latLng.lat // 纬度
          console.log('获取位置')
          that.getAddressCode()
          qq.maps.event.addListener(that.map, 'click', function (event) {
            marker.setMap(null)
          })
        })

        // 调用地名显示地图位置并设置地址
        that.getAddress = new qq.maps.Geocoder({
          complete: function (result) {
            that.map.setCenter(result.detail.location)
            // 输入调用地图经纬度和地址
            that.longitude = result.detail.location.lat // 经度
            that.latitude = result.detail.location.lng // 纬度
            that.Latitudeandlongitude = that.longitude + ',' + that.latitude // 经纬度
            // 获取地理位置
            var data = {
              location: that.Latitudeandlongitude,
              /* 换成自己申请的key*/
              key: '6REBZ-CQBK6-BLDSS-EQOOT-LZLBE-FXBDX',
              get_poi: 0,
            }
            var url = 'https://apis.map.qq.com/ws/geocoder/v1/?'
            data.output = 'jsonp'
            $.ajax({
              type: 'get',
              dataType: 'jsonp',
              data: data,
              jsonp: 'callback',
              jsonpCallback: 'QQmap',
              url: url,
              success: function (json) {
                var toStr = JSON.stringify(json)
                that.address =
                  json.result.address +
                  json.result.formatted_addresses.recommend
                // alert(that.Latitudeandlongitude + ';' + that.address)
                // console.log("地名调用")
              },
              error: function (err) {
                alert('服务端错误，请刷新浏览器后重试')
              },
            })
          },
        })
        // 通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function (result) {
            that.addressKeyword = result.detail.address
          },
        })
      })
    },
    // 通过地址获得位置！！！！！！！！
    getAddressKeyword() {
      // 通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword) // 调用自带的接口
    },
    // 通过坐标获得地址
    getAddressCode() {
      var that = this
      var lat = parseFloat(that.latitude)
      var lng = parseFloat(that.longitude)
      var latLng = new qq.maps.LatLng(lat, lng)
      that.Latitudeandlongitude = lat + ',' + lng
      // 获取地理位置
      var data = {
        location: that.Latitudeandlongitude,
        /* 换成自己申请的key*/
        key: '6REBZ-CQBK6-BLDSS-EQOOT-LZLBE-FXBDX',
        get_poi: 0,
      }
      var url = 'https://apis.map.qq.com/ws/geocoder/v1/?'
      // axios({
      //   adapter: jsonpAdapter,
      //   type: 'get',
      //   dataType: 'jsonp',
      //   data: data,
      //   jsonp: 'callback',
      //   jsonpCallback: 'QQmap',
      //   url: url,
      // })
      //   .then((res) => console.log(res))
      //   .catch((err) => console.log(err))

      data.output = 'jsonp'
      $.ajax({
        type: 'get',
        dataType: 'jsonp',
        data: data,
        jsonp: 'callback',
        jsonpCallback: 'QQmap',
        url: url,
        success: function (json) {
          var toStr = JSON.stringify(json)
          that.address = json.result.formatted_addresses.recommend
          // that.form.classField = that.address
          that.getAddCode.getAddress(latLng)
        },
        error: function (err) {
          alert('服务端错误，请刷新浏览器后重试')
        },
      })
    },
  },
}
</script>

<style>
</style>
